<template>
  <div id="app">
    <main>
      <!-- 动态组件 -->
      <!-- <compoment is="已经注册的组件"> -->
      <!-- <component :is="组件" -->

      <!-- 缓存组件 -->
      <!-- 被keep-alive组件 包裹的组件将会被缓存 -->
      <!-- <keep-alive></keep-alive> -->

      <!-- include - 字符串或正则表达式。只有名称匹配的组件会被缓存。 -->
      <!-- <keep-alive include="字符串||正则表达式"></keep-alive> -->

      <!-- exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 -->
      <!-- <keep-alive exclude="字符串||正则表达式"></keep-alive> -->

        
      <!-- 两个特殊的声明周期 -->
      <!-- activated：  被 keep-alive 缓存的组件激活时调用。 -->
      <!-- deactivated： 被 keep-alive 缓存的组件失活时调用。 -->


      <keep-alive include="Home">
        <compoment :is="componentName"></compoment>
      </keep-alive>
    </main>
    <footer>
      <b
        v-for="(v, i) in navBar"
        :key="i"
        :class="i === activeIndex ? 'active' : ''"
        @click="activeIndex = i"
        >{{ v.name }}</b
      >
    </footer>
  </div>
</template>

<script>
import Classify from "./views/Classify.vue";
import Home from "./views/Home.vue";
import My from "./views/My.vue";
export default {
  data() {
    return {
      navBar: [
        {
          name: "首页",
          comp: Home
        },
        {
          name: "分类",
          comp: Classify
        },
        {
          name: "购物车",
          // 动态引入组件
          comp: () => import("./views/Car.vue")
        },
        {
          name: "我的",
          comp: My
        }
      ],
      activeIndex: 0
    };
  },
  computed: {
    componentName() {
      return this.navBar[this.activeIndex].comp;
    }
  }
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
    height: 100%;
    overflow-y: scroll;
  }

  footer {
    height: 36px;
    background: skyblue;
    color: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    b.active {
      color: red;
    }
  }
}
</style>